<template>
    <van-popup
            class="wdp-9 fullWin"
            v-model="visible"
            :closeable="false"
            close-icon="close"
            position="right"
    >
        <van-pull-refresh v-model="isRefresh" @refresh="loadData">
            <!--导航栏-->
            <bpm-nav-bar title="应用配置" :leftArrow="true" @close="close"></bpm-nav-bar>

            <div v-for="group in otherAppList" :key="group.id">
                <van-cell-group>
                    <van-cell>
                        <h3>{{group.groupName}}</h3>
                    </van-cell>
                </van-cell-group>
                <van-cell-group class="wpd-9-list">
                    <van-cell v-for="app in group.children" :key="app.id"
                              center icon="star-o">
                        <template #right-icon>
                            <van-switch v-model="app.isCustom" size="24" @change="change(app, $event)"/>
                        </template>
                        <template #left-icon>
                            <van-icon name="chat-o"></van-icon>
                        </template>
                        <template #title>
                            <h3>{{app.groupName}}</h3>
                        </template>
                        <template #label>
                            <p>{{app.groupDesc}}</p>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
        </van-pull-refresh>
    </van-popup>
</template>

<script>

    import bpmNavBar from '../../components/bpmNavBar';

    export default {
        name: 'appManage',
        components: {
            bpmNavBar,
        },
        data() {
            return {
                loaded: false,
                changed: false,
                isRefresh: false,
                visible: false,
                otherAppList: [],
                url: {
                    getCategoryAndCustomList: '/api/eform/manage/actAppGroup/getCategoryAndCustomList?isMobile=true',
                    delete: '/api/system/sysCustom/delete',
                    addCustom: '/api/system/sysCustom/addCustom',
                }
            }
        },
        methods: {
            show() {
                this.visible = true;
            },
            close() {
                if (this.changed) {
                    this.$emit("refresh");
                    this.changed = false;
                }
                this.visible = false;
            },
            loadData() {
                this.$mask.open();
                this.$http.get(this.url.getCategoryAndCustomList).then((res) => {
                    res.result.otherAppList.forEach(group => {
                        group.children.forEach(app => {
                            app['isCustom'] = !!app.customId;
                        })
                    })
                    this.otherAppList = res.result.otherAppList;
                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.isRefresh = false;
                    this.loaded = true;
                    this.$mask.close();
                });
            },
            change(app, checked) {
                if (checked) {
                    this.addCustom(app);
                } else {
                    this.delCustom(app);
                }
            },
            addCustom(app) {
                this.$mask.open();
                this.$http.post(this.url.addCustom, {type: 'app', id: app.id, name: app.groupName}).then((res) => {
                    app.customId = res.result;
                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.changed = true;
                    this.$mask.close();
                });
            },
            delCustom(app) {
                this.$mask.open();
                this.$http.delete(this.url.delete, {
                    params: {id: app.customId}
                }).then(() => {

                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.changed = true;
                    this.$mask.close();
                });
            }
        },
        watch: {
            visible(value) {
                if (value && !this.loaded) {
                    this.loadData();
                }
            }
        }
    }
</script>
